<template>
  <div class="news  mt-4 pl-4">
    <detai-title-com :title="title"></detai-title-com>
    <h4 class="title" v-show="articleId > 0" >{{article.title}}</h4>
    <p class="time" v-show="articleId > 0" >{{formatDate(new Date(article.publishTime))}}</p>
    <iframe-com v-if="(article.profileHtml !== undefined) && (articleId > 0)" :html="article.profileHtml"></iframe-com>
    <videos-com :list="articleList" v-if="type === 'shipin'"></videos-com>
    <div v-else>
      <news-com v-show="articleId == 0" :type="type" :total="total" :list="articleList" @change="onChange"></news-com>
    </div>
  </div>

</template>

<script>

  import detaiTitleCom from "@/components/detaiTitleCom"
  import newsCom from "./newsCom"
  import newsNav from "@/datas/newsNav";
  import IframeCom from "@/components/iframeCom";
  import VideosCom from "./videosCom";

  export default {
    props: ['options'],
    computed: {},
    data() {
      return {
        type: '',
        title:'',
        htm: '',
        articleId: 0,
        article: {
          html: ''
        },
        articleList:[],
        total: 0 ,
        nav: newsNav,
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
      }
    },
    components: {
      VideosCom,
      IframeCom,
      newsCom,
      detaiTitleCom},
    mounted() {

      this.init(this.options)
    },
    created() {
    },
    watch: {
      options: function (val) {
        this.init(val)
      }
    },
    methods: {
      init(options) {
        if (this.isNullOrEmpty(options.news)) {
          this.dlog('暂无新闻信息')
          return;
        }

        let type = this.$route.params.type;
        this.articleId = this.$route.params.articleId;
        if (this.isNullOrEmpty(type)) {
          type = 'allad'
        }

        if (this.isNullOrEmpty(this.articleId)) {
          this.articleId = 0
        }
        this.dlog('新闻类型:' + type)
        this.type = type;

        this.getNav(options.news)
        this.title = this.getTitle()

        this.$emit('changeTip', this.getTip())
        this.$emit('changeNav', this.nav)
        this.getData()
      },
      onChange(pagination) {
        this.dlog(pagination)
        this.pagination = pagination;
        this.getData()
      },
      getNav(news) {
        this.nav.children = []
        for (let item of news) {
          this.nav.children.push({
            "title": item.typeName,
            "link": `/news/${item.typeCode}`,
            "active": this.type === item.typeCode,
          })
        }
      },

      getTip(article) {
        if (this.isNullOrEmpty(article)) {
          let i = 0;
          for (let a of this.options.news) {
            if (this.type === a.typeCode) {
              if (i === 0) {
                return [{name: a.typeName}];
              } else {
                return [{name: '新闻动态', link: `/news/${this.options.news[0].typeCode}` }, {name: a.typeName}];
              }
            }
            i++;
          }
          return [{name: '新闻动态'}];
        } else {
          let i = 0;
          for (let a of this.options.news) {
            if (this.type === a.typeCode) {
              if (i === 0) {
                return [{name: a.typeName, link: `/news/${a.typeCode}`},{name:article}];
              } else {
                return [{name: '新闻动态', link: `/news/${this.options.news[0].typeCode}` }, {name: a.typeName, link: `/news/${a.typeCode}`},{name:article}];
              }
            }
            i++;
          }
          return [{name: '新闻动态', link: `/news/${athis.options.news[0].typeCode}`},{name:article}];
        }
      },
      getTitle() {
        if (this.isNullOrEmpty(this.options.news)) {
          return "新闻动态";
        }
        for (let a of this.options.news) {
          if (this.type === a.typeCode) {
            console.log('this.options')
            console.log(this.options.news)
            return a.typeName
          }
        }
        return '新闻动态';
      },

      getData() {
        if (this.isNullOrEmpty(this.articleId)) {
          this.pagination.type = this.getTitle()
          this.getHttpObject()
            .setApi('news/list', this.pagination)
            .onSucc((res)=>{
              let data = res.data.data;
              this.dlog('收到的新闻列表部数据:')
              this.dlog(data)
              this.articleList = data.articles
              this.total = data.total
            }).goAxios()
        } else {
          this.getHttpObject()
            .setApi('news/detail', {id: this.articleId})
            .onSucc((res)=>{
              let data = res.data.data;
              this.dlog('收到的新闻部数据:')
              this.dlog(data)
              this.article = data.article
              this.$emit('changeTip', this.getTip(this.article.title))
            }).goAxios()
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .news {
    iframe{
      overflow: hidden;
    }

    .title{
      font-size: @font-24;
      line-height: 1.3;
      padding: 10px 0;
    }

    ul, li {
      list-style: none;
    }
    .item{
      border-bottom: 2px dotted #D8D8D8;
      p{
        margin-bottom: 0;
      }
      .left{
        display: flex;
        align-items: center;
        justify-content: center;
        p{
          .padding(20,20,20,20);
          background: #F9FAFC;
          font-family: MicrosoftYaHeiUI;
          font-size: 18/@size;
          color: @theme-color;
          letter-spacing: 0;
        }
      }
      .list{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        p{
          line-height: 1.8;
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #222222;
        }
      }
      .right{
        background: #F9FAFC;
        .padding(15,15,15,15);
        .time{
          font-family: MicrosoftYaHeiUI-Bold;
          font-size: 16/@size;
          color: #F56C6C;
          letter-spacing: 0;
        }
        .media{
          border-bottom: 1px solid #E5E9F2;
          .padding(0,0,20,0);
        }
        .media-body{
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #222222;
          letter-spacing: 0;
          line-height: 24/@size;
        }
      }
    }
  }
  @media (min-width:320px) and (max-width: 767px) {
    .news {
      .title{
        font-size: @font-30;
        line-height: 1.3;
        padding: 10px 0;
      }
      .time{
        font-size: @font-28;
      }
    }
  }

</style>
